$(function () {
  var layer = layui.layer;
  var form = layui.form;
  var laypage = layui.laypage;

  //----------------------------------------------------------------
  // 页面查询参数
  var query = {
    pagenum: 1, //页码值
    pagesize: 5, //每页显示几条数据
    username: "", //姓名
    sno: "", //学号
  };
  //----------------------------------------------------------------
  //渲染分页功能
  function renderPage(total) {
    // console.log(total);
    laypage.render({
      elem: "pageBox", //分页容器的id
      count: total, //数据总数，从服务端得到
      limit: query.pagesize, //每页显示几条数据
      curr: query.pagenum,
      layout: ["count", "limit", "prev", "page", "next", "skip"],
      limits: [5, 10, 15, 20],
      jump: function (obj, first) {
        // console.log(first);
        query.pagenum = obj.curr;
        query.pagesize = obj.limit;
        // 首行不执行
        if (!first) {
          initUsersList();
        }
      },
    });
  }
  //----------------------------------------------------------------
  initUsersList();

  //----------------------------------------------------------------
  //表单验证
  form.verify({
    pwd: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
    repwd: function (value) {
      var pwd = $("#form_addUser [name=password]").val();
      // console.log(pwd);
      if (pwd != value) {
        return "两次密码不一致！";
      }
    },
    edit_repwd: function (value) {
      var pwd = $("#form_editUser [name=password]").val();
      // console.log(pwd);
      if (pwd != value) {
        return "两次密码不一致！";
      }
    },
    role: [/S/, "请选择角色"],
    sno: [/^[\S]{9}$/, "学号或工号必须9位，且不能出现空格"],
  });
  //----------------------------------------------------------------
  //获取所有用户信息列表
  function initUsersList() {
    var username = $("#form_search [name = username]").val();
    var sno = $("#form_search [name = sno]").val();
    query.username = username;
    query.sno = sno;
    $.ajax({
      method: "POST",
      url: "/my/userinfo/users/",
      data: query,
      success: function (res) {
        var htmStr = template("tpl-table", res);
        $("tbody").html(htmStr);
        renderPage(res.total);
      },
    });
  }
  //----------------------------------------------------------------
  //所有用户信息模糊搜索需要的信息
  $("#form_search").on("submit", function (e) {
    e.preventDefault();
    initUsersList();
  });
  //----------------------------------------------------------------
  //为添加用户按钮绑定点击事件
  var addUser_index = null;
  $("#addUsers").on("click", function () {
    addUser_index = layer.open({
      type: 1,
      area: ["420px", ""],
      title: "添加学生",
      content: $("#dialog_addUsers").html(),
      success: function () {
        form.render();
      },
    });
  });
  //----------------------------------------------------------------
  //通过代理的形式，为 form_addUser 表单绑定 submit 事件
  $("body").on("submit", "#form_addUser", function (e) {
    e.preventDefault();
    var data = {
      username: $("#form_addUser [name = username]").val(),
      sex: $("#form_addUser [name = sex]").val(),
      sno: $("#form_addUser [name =sno]").val(),
      college: $("#form_addUser [name = college]").val(),
      aclass: $("#form_addUser [name = aclass]").val(),
      phone_number: $("#form_addUser [name = phone_number]").val(),
      password: $("#form_addUser [name = password]").val(),
      access_name: "学生",
    };
    $.ajax({
      method: "POST",
      url: "/api/reguser",
      data: data,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg(res.message);
        }
        initUsersList();
        layer.msg("新增用户成功！");
        // 根据索引，关闭对应的弹出层
        layer.close(addUser_index);
      },
    });
  });
  //----------------------------------------------------------------
  //通过代理方式为 btn_editUser 按钮绑定 click 事件
  var editUser_index = null;
  $("tbody").on("click", ".btn_editUser", function () {
    editUser_index = layer.open({
      type: 1,
      area: ["420px", ""],
      title: "修改学生信息",
      content: $("#dialog_editUsers").html(),
      success: function () {
        form.render();
      },
    });
    var id = $(this).attr("data_id");
    // console.log(id)
    $.ajax({
      method: "GET",
      url: "/my/userinfo/user/" + id,
      success: function (res) {
        // console.log(res.data);
        form.val("form_edit", res.data);
      },
    });
  });
  //----------------------------------------------------------------
  //通过代理的形式，为 edit_addUser 表单绑定 submit 事件
  $("body").on("submit", "#form_editUser", function (e) {
    e.preventDefault();

    var data = {
      id: $("#form_editUser [name = id]").val(),
      username: $("#form_editUser [name = username]").val(),
      sex: $("#form_editUser [name = sex]").val(),
      college: $("#form_editUser [name = college]").val(),
      aclass: $("#form_editUser [name = aclass]").val(),
      phone_number: $("#form_editUser [name = phone_number]").val(),
      password: $("#form_editUser [name = password]").val(),
      access_name: "学生",
    };
    // console.log(data);
    $.ajax({
      method: "POST",
      url: "/my/userinfo/updateUser",
      data: data,
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) {
          return layer.msg(res.message);
        }
        layer.msg("更新用户信息成功");
        layer.close(editUser_index);
        initUsersList();
      },
    });
  });
  //----------------------------------------------------------------
  //通过代理方式为 btn_checkUser 按钮绑定 click 事件：审核用户权限
  $("tbody").on("click", ".btn_checkUser", function () {
    var id = $(this).attr("data_id");
    var access_name = $(this).attr("data_access_name");
    // console.log(id);
    $.ajax({
      method: "POST",
      url: "/my/userinfo/checkUser",
      data: {
        id: id,
        access_name: access_name,
      },
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) {
          return layer.msg(res.message);
        }
        layer.msg(res.message);
        initUsersList();
      },
    });
  });
  //----------------------------------------------------------------
  //通过代理方式为 btn_deleteUser 按钮绑定 click 事件：删除用户
  $("tbody").on("click", ".btn_deleteUser", function () {
    var id = $(this).attr("data_id");
    layer.confirm(
      "确定删除此用户？",
      {
        icon: 3,
        title: "提示",
      },
      function (deleteUser_index) {
        //do something
        // console.log(id);
        $.ajax({
          method: "POST",
          url: "/my/userinfo/deleteUser",
          data: {
            id: id,
          },
          success: function (res) {
            if (res.status !== 0) {
              return layer.msg(res.message);
            }
            layer.msg(res.message);
            initUsersList();
            layer.close(deleteUser_index);
          },
        });
      }
    );
  });

  //   ----------------
  //通过代理方式为 btn_off 按钮绑定 click 事件
  var editUser_index = null;
  $("tbody").on("click", ".btn_userOff", function () {
    editUser_index = layer.open({
      type: 1,
      area: ["420px", ""],
      title: "学生请假记录",
      content: $("#dialog_userOff").html(),
      success: function () {
        layui.use("laydate", function () {
          var laydate = layui.laydate;

          //执行一个laydate实例
          laydate.render({
            elem: "#start_time", //指定元素
          });
        });
        layui.use("laydate", function () {
          var laydate = layui.laydate;

          //执行一个laydate实例
          laydate.render({
            elem: "#end_time", //指定元素
          });
        });
        form.render();
      },
    });
    var id = $(this).attr("data_id");
    console.log(id);
    $.ajax({
      method: "GET",
      url: "/my/userinfo/user/" + id,
      success: function (res) {
        form.val("form_userOff", res.data);
      },
    });
  });
  //----------------------------------------------------------------
  //通过代理的形式，为 edit_addUser 表单绑定 submit 事件
  $("body").on("submit", "#form_userOff", function (e) {
    e.preventDefault();
    const table_data = $(this).serialize();
    // console.log(table_data);
    const params = new URLSearchParams(table_data);
    params.append("off_flag", 1);
    const updated_table_data = params.toString();
    // const data = {
    //   ...table_data,
    // };
    // console.log(data);

    $.ajax({
      method: "POST",
      url: "/my/userinfo/usersOff",
      data: updated_table_data,
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) {
          return layer.msg(res.message);
        }
        layer.msg("成功");
        layer.close(editUser_index);
        initUsersList();
      },
    });
  });

  //   ----------------
  //通过代理方式为 btn_off 按钮绑定 click 事件
  var editUser_index = null;
  $("tbody").on("click", ".btn_userBack", function () {
    editUser_index = layer.open({
      type: 1,
      area: ["420px", ""],
      title: "学生请假记录",
      content: $("#dialog_userBack").html(),
      success: function () {
        layui.use("laydate", function () {
          var laydate = layui.laydate;

          //执行一个laydate实例
          laydate.render({
            elem: "#start_time", //指定元素
          });
        });
        layui.use("laydate", function () {
          var laydate = layui.laydate;

          //执行一个laydate实例
          laydate.render({
            elem: "#end_time", //指定元素
          });
        });
        form.render();
      },
    });
    var id = $(this).attr("data_id");
    console.log(id);
    $.ajax({
      method: "GET",
      url: "/my/userinfo/user/" + id,
      success: function (res) {
        form.val("form_userBack", res.data);
      },
    });
  });
  //----------------------------------------------------------------
  //通过代理的形式，为 edit_addUser 表单绑定 submit 事件
  $("body").on("submit", "#form_userBack", function (e) {
    e.preventDefault();
    const table_data = $(this).serialize();
    // console.log(table_data);
    const params = new URLSearchParams(table_data);
    params.append("off_flag", 2);
    const updated_table_data = params.toString();
    // const data = {
    //   ...table_data,
    // };
    // console.log(data);

    $.ajax({
      method: "POST",
      url: "/my/userinfo/usersOff",
      data: updated_table_data,
      success: function (res) {
        // console.log(res);
        if (res.status !== 0) {
          return layer.msg(res.message);
        }
        layer.msg("成功");
        layer.close(editUser_index);
        initUsersList();
      },
    });
  });
});
